<template>
  <div
    id="pricePopover"
    class="product-popover-view"
  >

    <el-popover
      ref="popover1"
      v-model:visible="visible"
      :disabled="disabled"
      :placement="position"
      :width="900"
      trigger="click"
    >
      <template #reference>
        <slot />
      </template>
      <div style="display: flex;justify-content: space-between;padding-bottom: 10px">
        <div>
          <span
            v-if="column"
            style="color: #f57861;"
          >您选择的终端价：{{ column.terminalPrice }} （编号为：{{ column.priceNumber }}）</span>
        </div>

        <div class="btn-view">
          <!-- <el-button class="border-btn" size="mini" @click="onClose">关闭</el-button> -->
          <el-button
            class="border-btn"
            size="mini"
            @click="onCancel"
          >取消
          </el-button>
          <el-button
            class="main-btn"
            size="mini"
            type="primary"
            @click="onConfirm"
          >确定
          </el-button>
        </div>

      </div>
      <el-table
        ref="singleTable"
        max-height="300px"
        header-cell-class-name="popover-table-header"
        border
        :data="tableData"
        highlight-current-row
        style="width: 100%"
        @current-change="handleCurrentChange"
        @row-dblclick="handledbclick"
      >
        <el-table-column
          label="价格编号"
          prop="priceNumber"
          header-align="center"
          min-width="100"
        />
        <el-table-column
          label="适用地区"
          header-align="center"
          width="200px"
        >
          <template #default="scope">
            <area-list-view :areas="scope.row.region" />
          </template>
        </el-table-column>
        <el-table-column
          label="准入模式"
          header-align="center"
          min-width="100"
        >
          <template #default="scope">
            {{ getLabel('access_mode',scope.row.accessMode) }}
          </template>
        </el-table-column>
        <el-table-column
          label="价格属性"
          header-align="center"
          min-width="100"
        >
          <template #default="scope">
            {{ getLabel('price_type',scope.row.priceType) }}
          </template>
        </el-table-column>
        <el-table-column
          label="适用终端"
          header-align="center"
          min-width="100"
        >
          <template #default="scope">
            {{ getLabel('app_mode',scope.row.terminalType) }}
          </template>
        </el-table-column>
        <el-table-column
          label="终端价(元)"
          header-align="center"
          align="right"
          prop="terminalPrice"
          min-width="100"
        />
        <el-table-column
          label="底价(元)"
          header-align="center"
          align="right"
          prop="guidingPrice"
          min-width="120"
        />
      </el-table>
    </el-popover>

  </div>
</template>
<script>
import areaListView from '../areaListView/index.vue'

import {defineComponent, getCurrentInstance, inject, onMounted, ref, watch,} from 'vue'

export default defineComponent({
  name: 'Index',
  components: {
    areaListView,
  },
  props: {
    searchs: {
      type: String,
      default: '',
    },
    position: {
      type: String,
      default: 'bottom-start',
    },
    propsProduct: {
      type: Object,
      default: function() {
        return {
          terminalType: '',
          productId: 0,
          region: [],
          terminald: 0,
        }
      },
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }) {
    const currentInstance = getCurrentInstance()
    const api = inject('api')
    var visible = ref(false)
    var tableData = ref([])
    var column = ref(null)
    const singleTable = ref(null)

    const getData = () => {
      if (props.propsProduct) {
        api.terminal
          .REGISTERED_TERMINAL_LIST(props.propsProduct)
          .then((res) => {
            if (!res.code && res.data) {
              tableData.value = res.data.list
            }
          })
      }
    }

    watch(
      () => props.searchs,
      (newS, oldS) => {
        getData()
        visible.value = true
      }
    )

    onMounted(() => {
      document.addEventListener('click', function(e) {
        var pop = document.getElementById('pricePopover')

        if (e.target != pop && !document.contains(pop, e.target)) {
        } else {
          visible.value = false
        }
      })
    })

    const handleCurrentChange = (val) => {
      column.value = val
    }

    const onConfirm = () => {
      if (!column) {
        currentInstance.proxy.customMessage({
          type: 'error',
          message: '请选择终端价',
        })
      }

      const a = JSON.parse(JSON.stringify(column.value))
      emit('confirm', a)

      setTimeout(() => {
        column.value = null
        visible.value = false
      }, 100)
    }

    const onCancel = () => {
      singleTable.value.setCurrentRow()
      column.value = null
      visible.value = false
    }

    const onClose = () => {
      singleTable.value.setCurrentRow()
      column.value = null
      visible.value = false
    }

    const handledbclick = (row, column, event) => {
      console.log(row,column,event)
      // column.value = row
      emit('confirm', row)
      visible.value = false
    }

    const openPopover = () => {
      console.log(props.propsProduct)
      getData()
      setTimeout(() => {
        visible.value = true
      }, 300)
    }

    return {
      visible,
      tableData,
      singleTable,
      column,

      handleCurrentChange,
      onConfirm,
      onCancel,
      onClose,
      handledbclick,
      openPopover,
    }
  },
})
</script>

<style lang="scss" scoped>
@import "@/style/basics.scss";

.product-popover-view {
}
</style>
